<template>
 <div class="content">
    <div class="allmap" ref="allmap"></div>
    <div class="tab">
        <div class="arrow" @click="V">V</div>
        <navbar v-model="selected">
            <tab-item id="1">酒店</tab-item>
            <tab-item id="2">景点</tab-item>
        
        </navbar>

        <tab-container v-model="selected">
            <tab-container-item id="1">
                <cell 
                v-for="item of addressList[0]" 
                :title="item.title"
                :label="item.label" 
                :key="item.id"
                @click.native="handleCellClick(item.id)"
                />
            </tab-container-item>
            <tab-container-item id="2">
                <cell 
                v-for="item of addressList[1]"
                :title="item.title" 
                :label="item.label" 
                :key="item.id"
                @click.native="handleCellClick(item.id)"
                />
            </tab-container-item>
        </tab-container>
    </div>
    <div class="to" @click="to">返回</div>
    
</div>
  
</template>

<script>
//	引入组件
import {
         Navbar,
         TabItem, 
         TabContainer,
         TabContainerItem,
         Cell,
        } from 'mint-ui'
import marKerImg from '../../../assets/img/marKer.png'	
		// import BMap from 'BMap'
//	定义输出组件name
export default {
  name: 'mapContent',
//注册组件
props:{
 addressList:Array
},
data(){
    return{
        clickflag:'0',
        flag:'1',
        selected:'1',
        // addressList:[
        //     [
        //         {
        //             id:"1",
        //             label:"东莞市天安数码城，<br><br>吃喝拉撒睡一条龙服务",
        //             title:"东莞市天安数码城"
        //         },
        //         {
        //             id:"2",
        //             label:"阳光第五小学",
        //             title:"东莞市南城街道阳光第五小学"
        //         },
        //     ],
        //      [
        //         {
        //             id:"1",
        //             label:"农业观光园",
        //             title:"东莞市龙洲湾都市农业观光园"
        //         },
        //         {
        //             id:"2",
        //             label:"现代生态农业观光园",
        //             title:"东莞市金谷现代生态农业观光园"
        //         },
        //     ]
        // ]
    }
},
components:{
     Navbar,
     TabItem, 
     TabContainer,
     TabContainerItem,
     Cell,
},
mounted(){
    this. addMasker(0,0)
},
methods:{
    to(){
      this.$router.go(-1)
    },
    V(){
        if(this.clickflag==='0'){
            this.$refs.allmap.style.height='20%'
            this.clickflag='1'
        }else{
            this.$refs.allmap.style.height='60%'
            this.clickflag='0'
        }
    },
    addMasker(m,n){
        //声明map等于构建出来的地图实例并传入作用在allmap这个元素节点
    let map = new BMap.Map(this.$refs.allmap) 

    //声明myGeo等于 构建出来的地址解析实例
    let myGeo =new BMap.Geocoder()

    //    for循环将二维数组中的地址循环处理
    for(let i=0;i<this.addressList.length;i++){
        for(let j=0;j<this.addressList[i].length;j++){

            // 声明title等于二维数组中【m】【n】参数的下标的地址
            let title=this.addressList[m][n]

            // 将循环出来的地址进行地址解析成经纬度
            myGeo.getPoint(this.addressList[i][j].title,function(point){
                // console.log(point)
                // 判断经纬度point是否存在
                if(point){

                     if(i===m&&j===n){
                        //  设置地图缩放等级传入经纬度跟15的等级
                         map.centerAndZoom(point,15)

                       //  声明myIcon等于new出来的BMap.Icon（将markerImg这个图片名传进来，并用BMap.Size（设置宽高）再设置周边距离
                         let myIcon=new BMap.Icon(marKerImg,new BMap.Size(60,60),{imageOffset:new BMap.Size(14,5)})

                        //  声明marKer等于new出来的BMap.Marker()这个标注位并传入经纬度point，将要添加的特殊标志对象名写在对象里
                         let marKer=new BMap.Marker(point,{icon:myIcon})

                        // 将marKer这个设置好的样式添加地图界面中
                         map.addOverlay(marKer)

                        //  添加信息窗口
                        // 声明infowindow用来new出窗口实例并输入title.title这个文本信息
                        // console.log(title.title)
                        let infowindow=new BMap.InfoWindow(title.label)
                       
                        // 设置infowindow窗口的宽跟高
                        infowindow.setWidth(250)
                        infowindow.setHeight(60)

                        // 在地图上打开设置好的infowindow窗口并确定中心点
                        map.openInfoWindow(infowindow,map.getCenter())
                     }else{
                           //  设置地图缩放等级传入经纬度跟15的等级
                          map.centerAndZoom(point,15)

                          //  声明marKer等于new出来的BMap.Marker()这个标注位并传入经纬度point，
                          let marKer=new BMap.Marker(point)

                          // 将marKer这个设置好的样式添加地图界面中
                          map.addOverlay(marKer)
                     }
                }else{
                    console.log("对不起，找不到")
                }
            })
        }
    }
    },
    changeMasker(id){
        // 声明page等于点击哪个for循环的标志位减去1的数值
        let page =parseInt(this.flag)-1

        // 声明index等于点击了for循环中的哪个id值-1的数值
        let index =parseInt(id)-1
        // 把点击两个的数值给作为参数传到定义地图的函数中
        this.addMasker(page,index)
    },
     handleCellClick(id){
       if(this.flag==='1'){
           this.changeMasker(id)
       }else{
           this.changeMasker(id)
       }
     }
},
watch:{
    //判断点击是左边还是右边
    selected(avl){
      if(avl==='1'){
        this.flag='1'
      }else{
          this.flag='2'
      }
    }
}
}
</script>


<style scoped>
.content{
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px; 
   background-color: #fff;
   z-index: 120;
}
/* .change{
    height: 30%;
} */
.allmap{
    height: 60%;
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 30px;
    z-index: 10000;
}
.tab{
    color: #000;

}
.arrow{
    text-align: center;
}
.to{
    width: 40px;
    height: 20px;
    text-align: center;
    background-color: rgb(160, 156, 156);
    border-radius: 35px;
    padding-top: 5px;
    color: rgb(238, 235, 235);
    position: absolute;
    top: 20px;
    left: 5px;
}
</style>
